<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        
        #box {
            width: 600px;
            margin: 50px auto;
            border: 1px solid blue;
        }
        
        #box header {
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background-color: #17a;
            padding: 0 10px;
        }
        
        #box header span {
            cursor: pointer;
        }
        
        #box header span.fl {
            float: left;
        }
        
        #box header span.fr {
            float: right;
        }
        
        #box header div {
            font-size: 30px;
        }
        
        #box table {
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        
        #box table th,
        #box table td {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="box">
        <!-- <header>
            <span class="fl">上个月</span>
            <span class="fr">下个月</span>
            <div>2021年11月</div>
        </header>
        <table width="100%" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th class="red">周日</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
            </tbody>
        </table> -->
    </div>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        $(function() {
            var defaultDate = new Date(2021, 10);
            var box = $("#box");
            var yearMonthTitleDiv = null;
            var prevMonthSpan = null;
            var nextMonthSpan = null;
            var tBody = null;
            var allTd = [];
            // 创建静态布局
            create();
            // 显示当前日期对应的日历
            showDate();

            function showDate() {
                var year = defaultDate.getFullYear(); //获取的年
                var month = defaultDate.getMonth() + 1; //获取的月
                yearMonthTitleDiv.text(year + "年" + month + "月");
                // 获取本月1号是星期几
                var week = new Date(year, month - 1, 1).getDay(); //1号是星期几
                // 获取本月最后一天是几号 表示本月有多少天
                var days = new Date(year, month, 0).getDate(); //当前月的前一个月的最后一天的日期
                var n = 1;
                for (var i = 0; i < allTd.length; i++) {
                    allTd[i].empty();
                    if (i >= week && n <= days) {
                        allTd[i].text(n);
                        n++;
                    }
                }
                // 如果最后一两行没内容则隐藏该两行或者最后一行没有内容则隐藏最后一行
                if (allTd[28].text() === '') {
                    allTd[28].parent().hide();
                    allTd[35].parent().hide();
                } else if (allTd[35].text() === '') {
                    allTd[35].parent().hide();
                } else {
                    allTd[28].parent().show();
                    allTd[35].parent().show();
                }
            }

            $('#box span').click(function() {
                var year = defaultDate.getFullYear(); //获取的年
                var month = defaultDate.getMonth(); //获取的月
                if ($(this).index() == 0) {
                    month--;
                } else {
                    month++;
                }
                defaultDate = new Date(year, month);
                showDate();
            })

            function create() {
                var header = $(`
            <header>
            <span class="fl">上个月</span>
            <span class="fr">下个月</span>
            <div>2021年11月</div>
        </header>
            `);
                box.append(header);
                yearMonthTitleDiv = header.find('div');
                prevMonthSpan = header.find(".fl");
                nextMonthSpan = header.find('.fr');
                var table = $(`
            <table width="100%" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th class="red">周日</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            </table>
            `);
                box.append(table)
                tBody = table.find('tbody');
                for (var i = 0; i < 6; i++) {
                    var tr = $("<tr></tr>");
                    for (var k = 0; k < 7; k++) {
                        var td = $("<td></td>");
                        tr.append(td);
                        allTd.push(td);
                    }
                    tBody.append(tr);
                }
            }


        })
    </script>
</body>

</html>